<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',collapsed:false" style="width:208px; border-top: 1px solid #dfdfdf;">
        <div id="merchantGoodsCategoryList<?php echo $uniqid;?>">
            <div style="text-align: center;">
                <a href="javascript:void(0);" onclick="clearCatSelect();" class="l-btn l-btn-small l-btn-plain" style="background-color: #01518d; color: #FFFFFF; padding: 2px 20px;"><span
                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-guanbi"></i><span
                        class="l-btn-text">清除选择的分类</span></span></a>
            </div>
        </div>
        <div class="con" onselectstart="return false;" style="-moz-user-select:none;">
            <table id="merchantGoodsCat"></table>
        </div>
    </div>
    <div data-options="region:'center'">
        <div id="tb<?php echo $uniqid;?>">
            <table cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td><a href="javascript:void(0);" onclick="merchantGoodsAdd();" class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-tianjia1"></i><span
                            class="l-btn-text">增加</span></span></a></td>
                    <td>
                        <div class="datagrid-btn-separator"></div>
                    </td>
                    <td><a href="javascript:void(0);" onclick="merchantGoodsEdit();" class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-bianji"></i><span
                            class="l-btn-text">编辑</span></span></a></td>
                    <td>
                        <div class="datagrid-btn-separator"></div>
                    </td>
                    <td><a href="javascript:void(0);" onclick="merchantGoodsRecycle();"
                           class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shanchu"></i><span
                            class="l-btn-text">回收站</span></span></a></td>
                    <td>
                        <div class="datagrid-btn-separator"></div>
                    </td>
                    <td><a href="javascript:void(0);" onclick="merchantGoodsReload();"
                           class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                            class="l-btn-text">重载</span></span></a></td>
                    <td>
                        <div class="datagrid-btn-separator"></div>
                    </td>
                    <td>
                        <SELECT id='merchantGoodsStatus' onchange="merchantGoodsSearch();" class="textbox-text validatebox-text">
                            <OPTION value="">全部状态</OPTION>
                            <OPTION value="" disabled="disabled">----------</OPTION>
                            <OPTION value="up">已上架</OPTION>
                            <OPTION value="down">已下架</OPTION>
                        </SELECT>
                    </td>
                    <td><span style="line-height:30px;"></span>
                        <input id="merchantGoodsKeywords" style="width:120px" placeholder="按ID、商品名搜索" type="text"
                               class="easyui-input textbox"></td>
                    <td><span style="line-height:30px;">价格区间</span>
                        <input id="merchantGoodsMinPrice" style="width:50px" placeholder="最低价格" type="text"
                               class="easyui-input textbox">
                        -
                        <input id="merchantGoodsMaxPrice" style="width:50px" placeholder="最高价格" type="text"
                                                                      class="easyui-input textbox"></td>
                    <td><a href="javascript:void(0);" onclick="merchantGoodsSearch();"
                           class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
                            class="l-btn-text">查询</span></span></a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="con" style="-moz-user-select:none;">
            <table id="merchantGoods"></table>
        </div>
    </div>
</div>


<div id="merchantGoodsdlg" class="easyui-dialog" style="width:720px; height:460px;" title="信息框" closed="true"></div>
<script>
    var category_id = 0;
    var merchantGoodsEdit = function (id) {
        let title = '编辑商品';
        let rowId = id || ($('#merchantGoods').datagrid('getSelected') && $('#merchantGoods').datagrid('getSelected').id);
        if (rowId) {
            let url = '/merchant/goods/edit?id=' + rowId;
            $('#rightTabs').tabs('close', title);
            addTab(title, url);
        } else {
            $.messager.alert('提示', '请先选择要编辑的记录！', 'warning');
        }
    };
    var merchantGoodsLink = function (id) {
        $.post('/merchant/goods/link', {id: id}, (data)=> {
            if (parseInt(data.ret) === 0) {
                let url = data.data; //拿到想要复制的值
                let copyInput = document.createElement('input');//创建input元素
                document.body.appendChild(copyInput);//向页面底部追加输入框
                copyInput.setAttribute('value', url);//添加属性，将url赋值给input元素的value属性
                copyInput.select();//选择元素
                document.execCommand("Copy"); //执行复制命令
                $.messager.show({
                    title: '提示',
                    msg: data.msg,
                    timeout: 3000,
                    showType: 'slide'
                });
            } else {
                $.messager.alert('提示', data.msg, 'warning');
            }
        }, 'json');
    };
    var merchantGoodsAdd = function () {
        let title = '编辑商品';
        $('#rightTabs').tabs('close', title);
        addTab(title, '/merchant/goods/add');
    };
    var merchantGoodsUp = function (id) {
        let rowId = id || ($('#merchantGoods').datagrid('getSelected') && $('#merchantGoods').datagrid('getSelected').id);
        if (rowId) {
            $.post('/merchant/goods/up', {id: rowId}, function (data) {
                $.messager.progress('close');
                if (parseInt(data.ret) === 0) {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 3000,
                        showType: 'slide'
                    });
                    merchantGoodsReload();
                } else {
                    $.messager.alert('提示', data.msg, 'warning');
                }
            }, 'json');
        }
    };
    var merchantGoodsDown = function (id) {
        let rowId = id || ($('#merchantGoods').datagrid('getSelected') && $('#merchantGoods').datagrid('getSelected').id);
        if (rowId) {
            $.post('/merchant/goods/down', {id: rowId}, function (data) {
                $.messager.progress('close');
                if (parseInt(data.ret) === 0) {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 3000,
                        showType: 'slide'
                    });
                    merchantGoodsReload();
                } else {
                    $.messager.alert('提示', data.msg, 'warning');
                }
            }, 'json');
        }
    };
    var merchantGoodsRecycle = function (id) {
        let rowId = id || ($('#merchantGoods').datagrid('getSelected') && $('#merchantGoods').datagrid('getSelected').id);
        if (rowId) {
            $.messager.confirm('提示', '确定放回收站吗？', function (r) {
                if (r) {
                    $.messager.progress();
                    $.post('/merchant/goods/recycle', {id: rowId}, function (data) {
                        $.messager.progress('close');
                        if (parseInt(data.ret) === 0) {
                            $.messager.show({
                                title: '提示',
                                msg: data.msg,
                                timeout: 3000,
                                showType: 'slide'
                            });
                            merchantGoodsReload();
                        } else {
                            $.messager.alert('提示', data.msg, 'warning');
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请先选择要扔回收站的行！', 'warning');
        }
    };
    var merchantGoodsRestore = function (id) {
        let rowId = id || ($('#merchantGoods').datagrid('getSelected') && $('#merchantGoods').datagrid('getSelected').id);
        if (rowId) {
            $.messager.confirm('提示', '确定恢复数据吗？', function (r) {
                if (r) {
                    $.messager.progress();
                    $.post('/merchant/goods/restore', {id: rowId}, function (data) {
                        $.messager.progress('close');
                        if (parseInt(data.ret) === 0) {
                            $.messager.show({
                                title: '提示',
                                msg: data.msg,
                                timeout: 3000,
                                showType: 'slide'
                            });
                            merchantGoodsReload();
                        } else {
                            $.messager.alert('提示', data.msg, 'warning');
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请先选择恢复的数据！', 'warning');
        }
    };
    var merchantGoodsDelete = function (id) {
        let rowId = id || ($('#merchantGoods').datagrid('getSelected') && $('#merchantGoods').datagrid('getSelected').id);
        if (rowId) {
            $.messager.confirm('提示', '确定彻底删除吗？', function (r) {
                if (r) {
                    $.messager.progress();
                    $.post('/merchant/goods/delete', {id: rowId}, function (data) {
                        $.messager.progress('close');
                        if (parseInt(data.ret) === 0) {
                            $.messager.show({
                                title: '提示',
                                msg: data.msg,
                                timeout: 3000,
                                showType: 'slide'
                            });
                            merchantGoodsReload();
                        } else {
                            $.messager.alert('提示', data.msg, 'warning');
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请先选择要扔回收站的行！', 'warning');
        }
    };
    // var merchantGoodsupdate_status = function (id, type, status) {
    //     $.post('/merchant/goods/updateStatus', {id: id, type: type, status: status}, function (data) {
    //         if (data.ret == 0) {
    //             $.messager.show({
    //                 title: '提示',
    //                 msg: data.msg,
    //                 timeout: 3000,
    //                 showType: 'slide'
    //             });
    //             merchantGoodsReload();
    //         } else {
    //             $.messager.alert('提示', data.msg, 'warning');
    //         }
    //     }, 'json');
    // };
    var merchantGoodsReload = function () {
        $("#merchantGoods").datagrid('reload');
    };
    var merchantGoodsSearch = function () {
        var height = $(window).height() - $(".top").height() - 46;//表格高度
        var width = $(window).width() - $(".leftmenu").width() - 206 - 8;
        $("#merchantGoods").datagrid({
            title: '商品管理',
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 15,
            pageList: [15, 30, 40, 50],
            method: 'post',
            sortName: 'weigh',
            sortOrder: 'desc',
            url: '/merchant/goods/index',
            queryParams: {
                keywords: $('#merchantGoodsKeywords').val(),
                minprice:$('#merchantGoodsMinPrice').val(),
                maxprice:$('#merchantGoodsMaxPrice').val(),
                category_ids: category_id,
                status:  $('#merchantGoodsStatus').val(),
            },
            fitColumns: false,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: false,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            toolbar: '#tb<?php echo $uniqid;?>',
            rowStyler: function (index, row) {
                if (row.status == 'down') {
                    return 'color:#999;';
                }
            },
            columns: [[
                {field: 'id', title: 'ID', width: '3%', sortable: true},
                {
                    field: 'title', title: '名称', width: '32%', formatter: function (value, rowData, rowIndex) {
                        return '<div style="display: flex;align-items: center;">' +
                            '<img src="' + rowData.image + '?imageView2/1/w/60/h/60" style="height:60px;width:60px;border-radius: 5px;border:#dfdfdf 1px solid;">' +
                            '<div>' + value + (rowData.is_sku ? '<br>（多规格）' : '') + (rowData.deleted_at ? '<br><span style="color: red">（已删除）</span>' : '') + '</div></div>';
                    }
                },
                {field: 'status', title: '状态', width: '8%', align: 'center', formatter(value, rowData){
                        return value === 'up' ? '已上架' : '已下架';
                    }},
                {field: 'price', title: '价格', width: '5%', align: 'center', sortable: true},
                {field: 'sales', title: '销量', width: '5%', align: 'center', sortable: true},
                {field: 'views', title: '浏览量', width: '5%', align: 'center', sortable: true},
                {field: 'stock', title: '库存', width: '5%', align: 'center', sortable: true},
                {field: 'updated_at', title: '更新时间', width: '5%', align: 'center', sortable: true},
                {field: 'weigh', title: '排序', width: '5%', align: 'center', sortable: true},
                {
                    field: 'options',
                    title: '操作',
                    align: 'center',
                    width: '15%',
                    formatter: function (value, rowData, rowIndex) {
                        let buttons = '<div class="table"><span class="l-btn l-btn-small color9 table" onclick="merchantGoodsEdit(\'' + rowData.id + '\')"><span class="l-btn-text">编辑</span></span>';
                        if (rowData.status === 'down') {
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="merchantGoodsUp(\'' + rowData.id + '\')"><span class="l-btn-text">立即上架</span></span>';
                        }
                        if (rowData.status === 'up') {
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="merchantGoodsLink(\'' + rowData.id + '\')"><span class="l-btn-text">复制链接</span></span>';
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="merchantGoodsDown(\'' + rowData.id + '\')"><span class="l-btn-text" style="color: red">立即下架</span></span>';
                        }
                        if (rowData.deleted_at){
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="merchantGoodsRestore(\'' + rowData.id + '\')"><span class="l-btn-text">恢复</span></span>';
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="merchantGoodsDelete(\'' + rowData.id + '\')"><span class="l-btn-text">彻底删除</span></span>';
                        }else{
                            buttons += '<span class="l-btn l-btn-small color9 table" onclick="merchantGoodsRecycle(\'' + rowData.id + '\')"><span class="l-btn-text">删除</span></span>';
                        }

                        return buttons + '</div>';
                    }
                },
            ]],
            onDblClickRow: function (index, field) {
                merchantGoodsEdit();
            }
        });
    };

    var selectMerchantGoods = function () {
        var row = $('#merchantGoodsCat').datagrid('getSelected');
        if (row) {
            category_id = row.id;
            merchantGoodsSearch();
        }
    };

    var clearCatSelect = function () {
        $('#merchantGoodsCat').datagrid('unselectAll');
        category_id = 0;
        merchantGoodsSearch();
    }
    var merchantGoodsCatSearch = function () {
        var height = $(window).height() - $(".top").height() - 46;
        var width = 206;
        $("#merchantGoodsCat").treegrid({
            title: '',
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: false,//是否显示分页
            pageSize: 10,
            pageList: [10, 15, 20, 25],
            method: 'post',
            idField: 'id',
            treeField: 'name',
            sortName: 'weigh',
            sortOrder: 'desc',
            url: '/merchant/category/index',
            queryParams: {},
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            toolbar:'#merchantGoodsCategoryList<?php echo $uniqid;?>',
            columns: [[
                {field: 'name', title: '商品分类', width: '90%'},
            ]],
            onClickRow: function (index, field) {
                selectMerchantGoods();
            },
        });
    };
    merchantGoodsCatSearch();
    merchantGoodsSearch();
    onTreegridResize("#merchantGoodsCat");
    onDatagridResize("#merchantGoods");
</script>
